<div>
    <h2 id="page-heading">
        Search Result
    </h2>

    <jhi-alert-error></jhi-alert-error>

    <jhi-alert></jhi-alert>

    <div class="row">
        <div class="col-sm-12">
            <form name="searchForm" class="form-inline">
                <div class="input-group w-100 mt-3">
                    <input type="text" class="form-control" [(ngModel)]="currentSearch" id="currentSearch" name="currentSearch" placeholder="{{ 'search2App.crawlerPage.home.search' | translate }}">

                    <button class="input-group-append btn btn-info" (click)="search(currentSearch)">
                        <fa-icon icon="search"></fa-icon>
                    </button>

                    <button class="input-group-append btn btn-danger" (click)="search('')" *ngIf="currentSearch">
                        <fa-icon icon="trash-alt"></fa-icon>
                    </button>
                </div>
            </form>
        </div>
    </div>
    <br/>

    <div class="alert alert-warning" id="no-result" *ngIf="crawlerPages?.length === 0">
        <span jhiTranslate="search2App.crawlerPage.home.notFound">No crawlerPages found</span>
    </div>

    <div class="table-responsive" id="entities" *ngIf="crawlerPages && crawlerPages.length > 0">
        <div *ngFor="let crawlerPage of crawlerPages;trackBy: trackId">
            <h2>
                <a [href]="crawlerPage.url" style="text-decoration: underline">{{crawlerPage.title}}</a><br/>
                <div style="margin-top: 10px;font-size: medium" [innerHTML]="findContent(crawlerPage.source) | safeHtml"></div>
                <p style="color: #7f7f7f;font-size: small">{{crawlerPage.url}}</p>
            </h2>
        </div>
<!--        <table class="table table-striped" aria-describedby="page-heading">-->
<!--            <thead>-->
<!--            <tr jhiSort [(predicate)]="predicate" [(ascending)]="ascending" [callback]="loadPage.bind(this)">-->
<!--                <th scope="col"  jhiSortBy="id"><span jhiTranslate="global.field.id">ID</span> <fa-icon icon="sort"></fa-icon></th>-->
<!--                <th scope="col"  jhiSortBy="url"><span jhiTranslate="search2App.crawlerPage.url">Url</span> <fa-icon icon="sort"></fa-icon></th>-->
<!--                <th scope="col"  jhiSortBy="md5"><span jhiTranslate="search2App.crawlerPage.md5">Md 5</span> <fa-icon icon="sort"></fa-icon></th>-->
<!--                <th scope="col"  jhiSortBy="title"><span jhiTranslate="search2App.crawlerPage.title">Title</span> <fa-icon icon="sort"></fa-icon></th>-->
<!--                <th scope="col"  jhiSortBy="source"><span jhiTranslate="search2App.crawlerPage.source">Source</span> <fa-icon icon="sort"></fa-icon></th>-->
<!--                <th scope="col"></th>-->
<!--            </tr>-->
<!--            </thead>-->
<!--            <tbody>-->
<!--            <tr *ngFor="let crawlerPage of crawlerPages ;trackBy: trackId">-->
<!--                <td><a [routerLink]="['/crawler-page', crawlerPage.id, 'view']">{{ crawlerPage.id }}</a></td>-->
<!--                <td>{{ crawlerPage.url }}</td>-->
<!--                <td>{{ crawlerPage.md5 }}</td>-->
<!--                <td>{{ crawlerPage.title }}</td>-->
<!--                <td>{{ crawlerPage.source }}</td>-->
<!--                <td class="text-right">-->
<!--                    <div class="btn-group">-->
<!--                        <button type="submit"-->
<!--                                [routerLink]="['/crawler-page', crawlerPage.id, 'view']"-->
<!--                                class="btn btn-info btn-sm">-->
<!--                            <fa-icon icon="eye"></fa-icon>-->
<!--                            <span class="d-none d-md-inline" jhiTranslate="entity.action.view">View</span>-->
<!--                        </button>-->

<!--                        <button type="submit"-->
<!--                                [routerLink]="['/crawler-page', crawlerPage.id, 'edit']"-->
<!--                                class="btn btn-primary btn-sm">-->
<!--                            <fa-icon icon="pencil-alt"></fa-icon>-->
<!--                            <span class="d-none d-md-inline" jhiTranslate="entity.action.edit">Edit</span>-->
<!--                        </button>-->

<!--                        <button type="submit" (click)="delete(crawlerPage)"-->
<!--                                class="btn btn-danger btn-sm">-->
<!--                            <fa-icon icon="times"></fa-icon>-->
<!--                            <span class="d-none d-md-inline" jhiTranslate="entity.action.delete">Delete</span>-->
<!--                        </button>-->
<!--                    </div>-->
<!--                </td>-->
<!--            </tr>-->
<!--            </tbody>-->
<!--        </table>-->

    </div>

    <div *ngIf="crawlerPages && crawlerPages.length > 0">
        <div class="row justify-content-center">
            <jhi-item-count [page]="page" [total]="totalItems" [itemsPerPage]="itemsPerPage"></jhi-item-count>
        </div>

        <div class="row justify-content-center">
            <ngb-pagination [collectionSize]="totalItems" [(page)]="ngbPaginationPage" [pageSize]="itemsPerPage" [maxSize]="5" [rotate]="true" [boundaryLinks]="true" (pageChange)="loadPage($event)"></ngb-pagination>
        </div>
    </div>
</div>
